<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单表单示例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
      }
      form {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      label {
        display: block;
        font-weight: bold;
      }
      input[type="text"],
      input[type="password"],
      input[type="email"],
      select,
      textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .radio-group,
      .checkbox-group {
        margin-bottom: 15px;
      }
      .radio-option,
      .checkbox-option {
        margin-bottom: 5px;
      }
      button {
        background-color: #4caf50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background-color: #45a049;
      }
      .form-box {
      }
      .item {
        display: flex;
      }
      .item:focus-within {
        background-color: #45a049;
      }
      .item label {
        flex: 1;
        min-width: 75px;
      }
      .item label:has(+ input[required]){}
      .item label:has(+ input[required])::after{content: "*";color: #fd0202;}
      .html-box{
        line-height: 1.5;
      }
      .html-box::first-letter{color: #fd0202;font-size:3em;font-weight:bold;line-height:1;float: left;padding-right: 5px;}
    </style>
  </head>
  <body>
    <h2>用户注册表单</h2>
    <form action="/submit" method="post" class="form-box">
      <div class="item">
        <!-- 文本输入 -->
        <label for="username">用户名:</label>
        <input
          type="text"
          id="username"
          name="username"
          required
          placeholder="请输入用户名"
        />
      </div>
      <div class="item">
        <!-- 密码输入 -->
        <label for="password">密码:</label>
        <input
          type="password"
          id="password"
          name="password"
          required
          placeholder="请输入密码"
        />
      </div>
      <div class="item">
        <!-- 邮箱输入 -->
        <label for="email">电子邮箱:</label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="example@domain.com"
        />
      </div>

      <!-- 提交按钮 -->
      <button type="submit">提交</button>
    </form>

    <div class="html-box">
        This is a basic HTML form with common input fields like text, password, radio buttons, checkboxes, a dropdown menu, and a submit button. The form uses flex-direction: column; to arrange the elements vertically, making it easy to read and fill out. You can customize the fields or add more styles to match your design needs.
    </div>
  </body>
</html>
